<script setup lang="ts">
import { provide } from 'vue'
import { useMaterialStore } from '@/store/useMaterial.ts'
import EditPannel from '@/components/EditItems/EditPannel.vue'
import { ElMessage } from 'element-plus'
import { EditorType } from '@/constants'
import {
  isPicTitleDescStatus,
  isPLink,
  type OptionProps,
  type PicLink,
  type PicTitleDescStatus,
  type PicTitleDescStatusArr,
  type statusType,
  type TextProps,
} from '@/types'
import { setOptionsisUserStatus } from '@/store/actions.ts'
const store = useMaterialStore()
const updateStatus = (configKey: string, payload: statusType) => {
  switch (configKey) {
    case EditorType.title:
    case EditorType.desc:
    case EditorType.descColor:
    case EditorType.titleColor: {
      if (typeof payload !== 'string') {
        console.error('payload must be string')
        return
      }
      store.setTextPropsStatus(
        store.comS[store.currentMaterialCom].status[configKey] as TextProps,
        payload,
      )
      break
    }
    case EditorType.options: {
      if (typeof payload === 'string') {
        store.addStringArrStatus(
          store.comS[store.currentMaterialCom].status[configKey] as OptionProps,
          payload,
        )
      } else if (typeof payload === 'number') {
        const PropsStatus = store.comS[store.currentMaterialCom].status[configKey]
        if (PropsStatus.status.length === 2) {
          ElMessage.error('选项数量不能少于2个')
          return
        }
        store.removeOptionsArrStatus(PropsStatus, payload)
        ElMessage.success('删除成功')
      } else if (typeof payload === 'boolean') {
        store.setOptionsisUserStatus(
          store.comS[store.currentMaterialCom].status[configKey] as OptionProps,
          payload,
        )
      } else if (isPLink(payload)) {
        store.setPicImageStatus(
          store.comS[store.currentMaterialCom].status[configKey] as OptionProps,
          payload,
        )
      } else if (isPicTitleDescStatus(payload)) {
        store.addOptionsStatus(
          store.comS[store.currentMaterialCom].status[configKey] as OptionProps,
          payload as PicTitleDescStatus,
        )
      }
      break
    }
    case EditorType.type: {
      if (typeof payload === 'number'){
        store.setCurrentStatus(store.comS[store.currentMaterialCom].status[configKey], payload)
      }
      break;
    }
    case EditorType.position:
    case EditorType.titleSize:
    case EditorType.descSize:
    case EditorType.titleWeight:
    case EditorType.descWeight:
    case EditorType.titleItalic:
    case EditorType.textType:
    case EditorType.descItalic: {
      if (typeof payload !== 'number') {
        console.error('payload currentStauts must be number')
        return
      }
      store.setCurrentStatus(store.comS[store.currentMaterialCom].status[configKey], payload)
      break
    }
  }
}

const updatePicLink = (link: PicLink) => {
  console.log(link)
  updateStatus(EditorType.options, link)
}

provide('updatePicLink', updatePicLink)

provide('updateStatus', updateStatus)
</script>

<template>
  <div class="layout-container flex">
    <div class="left flex wrap space-between">
      <slot name="left"></slot>
    </div>
    <div class="center">
      <RouterView v-slot="{ Component }">
        <Component
          :is="Component"
          :serialNum="1"
          :status="store.comS[store.currentMaterialCom].status"
        />
      </RouterView>
    </div>
    <div class="right">
      <EditPannel :com="store.comS[store.currentMaterialCom]"></EditPannel>
    </div>
  </div>
</template>

<style scoped lang="scss">
.layout-container {
  width: 100%;
  // Header组件高度50px，h1高度50px，上下margin 20px，最后20px是额外多减去一部分，避免贴底
  height: calc(100vh - 100px - 40px - 20px);
  align-items: flex-start;
  border: 1px solid var(--border-color);
  border-top-right-radius: var(--border-radius-lg);
  border-bottom-left-radius: var(--border-radius-lg);
  border-bottom-right-radius: var(--border-radius-lg);
}
.left {
  width: 180px;
  text-align: center;
  align-items: flex-start;
  padding: 20px;
}
.center {
  width: 550px;
  // 多减去的60px是上下的padding，，最后20px是额外多减去一部分，避免贴底
  height: calc(100vh - 100px - 40px - 60px - 20px);
  overflow-y: scroll;
  padding: 30px;
  border-left: 1px solid var(--border-color);
}
.right {
  width: 350px;
  height: calc(100vh - 100px - 40px - 60px);
  overflow-y: scroll;
  border-left: 1px solid var(--border-color);
  padding: 20px;
  box-sizing: border-box;
}
</style>
